<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="社区互动"></head-title>
		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height:windowH + 'px'}">
			<view v-if="nolist"><nolist nolistTxt="暂无互动消息"></nolist></view>
			<view v-else class="cont">
				<view @tap="bindNav(index)" v-for="(item,index) in commentList" :key="index" class="list flex_row" hover-class="bindhover">
					<view class="headPic">
						<image :src="item.avatarurl" mode="aspectFill"></image>
					</view>
					<view class="msg">
						<view class="left flex_row">
							<view class="userName flex_row">
								<text>{{item.nickname}}</text>
								<image v-if="item.gender==1" src="../../static/image/man.png"></image>
								<image v-else src="../../static/image/woman.png"></image>
							</view>
							<view v-if="item.s_type==2" class="right flex_row">
								<view class="time">{{item.add_time}}</view>
							</view>
							<view v-else class="right flex_row">
								<text>送你一朵花</text>
								<image src="../../static/image/huaon.png" mode="aspectFill"></image>
							</view>
						</view>
						<view v-if="item.s_type==2" class="txt">
							<text v-if="item.h_uid==0">评论</text>
							<text v-else>回复</text>
							<text v-if="item.h_uid==0" class="h_color">我的动态:</text>
							<text v-else class="h_color">{{item.h_user.h_nickname}}:</text>
							{{item.c_content}}
						</view>
						<view v-else class="time">{{item.add_time}}</view>
					</view>
				</view>
				<load :loadTxt="loadTxt" :loading="loading"></load>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import headTitle from "../../components/headTitle.vue";
	import common from '../../common/network.js';
	import load from "../../components/load.vue";
	import nolist from "../../components/nolist.vue";
	let session = '',page=1,fullPage=1;
	export default {
		components:{headTitle,load,nolist},
		data(){
			return{
				windowH:0,commentList:[],
				nolist:false,loading:false,loadTxt:'正在加载...'
			}
		},
		onLoad:function(options){
			this.getHeight();
			var that = this;
			if(options.session!=undefined){
				session = options.session;
				page = 1;
				that.getList();
			}
		},
		methods:{
			getHeight:function(){
				var that = this;
				common.network.getHeight(function(h,w,bar){
					console.log(bar)
					that.windowH = h - w/750 * 142;
				})
			},
			bindNav:function(index){
				var list = this.commentList;
				var id = list[index].c_id
				uni.navigateTo({
					url:'/pagesA/trendsDetail/trendsDetail?communityId='+id+'&session='+session
				})
			},
			getList:function(){
				var that = this;
				var commentList = that.commentList;
				var $data = {
					'type':'zcommunity_remind_list',
					'session':session,
					'page':page,
				};
				common.network.request($data,function(res){
					console.log(res);
					fullPage = res.pageData.pagecount;
					that.commentList = commentList.concat(res.list);
					that.loading = false;
					if(commentList.concat(res.list)==''){
						that.nolist= true;
					}else{
						that.nolist= false;
					}
				})
			},
			scrolltolower:function(){
				this.loading = true;
				if(page>=fullPage){
					this.loadTxt = '我是有底线的';
					return false;
				}else{
					page ++;
					this.loadTxt = "正在加载...";
					this.getList();
				}
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F2F3F7;
	}
	.cont{
		padding: 12px;
	}
	.list{
		padding: 30px 26px;
		background: #fff;
		margin-bottom: 10px;
		border-radius: 8px;
		/* align-items: flex-start; */
	}
	.headPic{
		width: 120px;
		height: 120px;
		min-width: 120px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 26px;
	}
	.headPic image{
		border-radius: 50%;
		width: 100%;
		height: 100%;
	}
	.msg{
		width: 528px;
	}
	.left{
		justify-content: space-between;
		padding-bottom: 10px;
	}
	.userName{
		font-size: 32px;
	}
	.userName text{
		max-width: 250px;
		white-space: nowrap;
		overflow: hidden;
	}
	.right{
		color: #EF2729;
		font-size: 26px;
	}
	.right image{
		width: 32px;
		height: 32px;
		margin-left: 10px;
	}
	.txt{
		padding-top: 10px;
		font-size: 28px;
		white-space: nowrap;
		height: 44px;
		overflow: hidden;
		width: 552px;
		text-overflow: ellipsis;
	}
	.txt .h_color{
		color: #6278FF;
		margin-right: 10px;
	}
	.list .time{
		color: #B9B9B9;
		font-size: 26px;
	}
	.bindhover{
		background: #f8f8f8;
	}
</style>
